<template>
  <div class="table-page">
    <GiTable
      row-key="id"
      title="会议列表"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: 1800, y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="tableSearch"
    >
      <template #custom-left>
        <a-input v-model="queryForm.keywords" placeholder="会议室名称/会议主题/会议号" allow-clear @input="tableSearch">
          <template #prefix><icon-search /></template>
        </a-input>
        <a-select v-model="queryForm.meetType" placeholder="请选择会议类型" allow-clear :style="{ width: '200px' }" @change="tableSearch">
          <a-option :value="0">线下</a-option>
          <a-option :value="1">线上</a-option>
        </a-select>
        <a-select v-model="queryForm.conferenceState" placeholder="请选择会议状态" allow-clear :style="{ width: '200px' }" @change="tableSearch">
          <a-option :value="0">预约</a-option>
          <a-option :value="1">已开始</a-option>
          <a-option :value="2">取消</a-option>
          <a-option :value="3">结束</a-option>
        </a-select>
        <a-range-picker v-model="queryForm.searchDate" style="width: 254px;" @change="tableSearch"
        />
        <a-button @click="reset">
          <template #icon><icon-refresh /></template>
          <template #default>重置</template>
        </a-button>
        <a-button type="primary" :loading="exportLoading" @click="exportTableData">
          <template #icon><IconDownload /></template>
          <template #default>导出</template>
        </a-button>
      </template>
      <template #conferenceState="{ record }">
        <a-tag :color="getStatusColor(record.conferenceState)">
          {{ getStatusText(record.conferenceState) }}
        </a-tag>
      </template>
      <template #meetType="{ record }">
        <a-tag :color="record.meetType === 0 ? 'blue' : 'green'">
          {{ record.meetType === 0 ? '线下' : '线上' }}
        </a-tag>
      </template>
      <template #subject="{ record }">
        <a-tooltip :content="record.subject">
          <div class="subject-wrapper">
            <a-link @click="showMeetDetail(record)">{{ record.subject }}</a-link>
          </div>
        </a-tooltip>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click="onSeeStaff(record)">查看签到人员</a-link>
          <a-dropdown v-if="record.conferenceState === 0 || record.conferenceState === 1 || record.templateUrl">
            <a-link style="padding: 0 8px;">更多 <IconDown /></a-link>
            <template #content>
              <a-doption v-if="record.conferenceState === 0 || record.conferenceState === 1" @click="cancelMeeting(record.conferenceId)">
                <IconClose style="color: #f53f3f; margin-right: 4px;" />取消会议
              </a-doption>
              <a-doption v-if="record.templateUrl" @click="downloadTemplateFile(record.templateUrl)">
                <IconDownload style="color: #165dff; margin-right: 4px;" />下载会议服务文件
              </a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
      <template #meetingRoomName="{ record }">
        <a-tooltip :content="record.meetingRoomName">
          <div class="room-name">
            <template v-if="record.meetingRoomName?.includes(',')">
              <div v-for="(name, index) in record.meetingRoomName.split(',')" :key="index">{{ name }}</div>
            </template>
            <template v-else>
              {{ record.meetingRoomName }}
            </template>
          </div>
        </a-tooltip>
      </template>
      <template #startTime="{ record }">
        <a-tooltip :content="record.startTime">
          <div class="time-text">
            <div class="time-date">{{ formatTime(record.startTime).date }}</div>
            <div class="time-hour">{{ formatTime(record.startTime).time }}</div>
          </div>
        </a-tooltip>
      </template>
      <template #endTime="{ record }">
        <a-tooltip :content="record.endTime">
          <div class="time-text">
            <div class="time-date">{{ formatTime(record.endTime).date }}</div>
            <div class="time-hour">{{ formatTime(record.endTime).time }}</div>
          </div>
        </a-tooltip>
      </template>
    </GiTable>

    <!-- 会议详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      :title="meetDetail?.subject"
      :width="800"
      :footer="false"
      unmount-on-close
      @cancel="detailVisible = false"
      @ok="detailVisible = false"
    >
      <div v-if="meetDetail" class="meet-detail">
        <div class="detail-item">
          <span class="label">会议号：</span>
          <span class="value">{{ meetDetail.conferenceId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议主题：</span>
          <span class="value">
            <div class="subject-detail">{{ meetDetail.subject }}</div>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议室：</span>
          <span class="value">{{ meetDetail.meetingRoomName || '线上会议' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议时间：</span>
          <span class="value">{{ meetDetail.startTime }} - {{ meetDetail.endTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">会议状态：</span>
          <span class="value">
            <a-tag :color="getStatusColor(meetDetail.conferenceState)">
              {{ getStatusText(meetDetail.conferenceState) }}
            </a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议类型：</span>
          <span class="value">
            {{ meetDetail.meetType === 0 ? '线下' : '线上' }}
            <a-tag v-if="meetDetail.circleType === 1" color="blue" class="ml-2">周期会议</a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="label">会议配置：</span>
          <div class="value config-group">
            <div class="config-item">
              <a-tag :color="getCallInRestrictionColor(meetDetail.callInRestriction)">
                {{ getCallInRestrictionText(meetDetail.callInRestriction) }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.enableWaitingRoom ? 'blue' : 'gray'">
                {{ meetDetail.enableWaitingRoom ? '开启等候室' : '关闭等候室' }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.autoMute === 1 ? 'blue' : 'gray'">
                {{ meetDetail.autoMute === 1 ? '自动静音' : '不自动静音' }}
              </a-tag>
            </div>
            <div class="config-item">
              <a-tag :color="meetDetail.enableSignOut === '1' ? 'blue' : 'gray'">
                {{ meetDetail.enableSignOut === '1' ? '开启签到' : '关闭签到' }}
              </a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signInBeforeMinutes" class="config-item">
              <a-tag color="blue">会前{{ meetDetail.signInBeforeMinutes }}分钟可签到</a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signOutMinutesAfterSignIn" class="config-item">
              <a-tag color="blue">签到结束后{{ meetDetail.signOutMinutesAfterSignIn }}分钟可签退</a-tag>
            </div>
            <div v-if="meetDetail.enableSignOut === '1' && meetDetail.signOutAfterEndMinutes" class="config-item">
              <a-tag color="blue">会议结束后{{ meetDetail.signOutAfterEndMinutes }}分钟内可签退</a-tag>
            </div>
          </div>
        </div>
        <div v-if="meetDetail.circleType === 1" class="detail-item">
          <span class="label">周期信息：</span>
          <div class="value">
            <div v-for="(monthGroup, index) in meetDetail.subMeet" :key="index" class="sub-meet-group">
              <div class="month-title">{{ monthGroup.month }}</div>
              <div class="sub-meet-list">
                <div v-for="sub in monthGroup.sub" :key="sub.id" class="sub-meet-item">
                  <div class="sub-meet-time">{{ sub.startTime }} - {{ sub.endTime }}</div>
                  <div class="sub-meet-subject">{{ sub.subject }}</div>
                  <div class="sub-meet-creator">创建人：{{ sub.createUserName }}</div>
                  <!-- 所有子会议都显示取消按钮 -->
                  <a-popconfirm
                    content="确定要取消此子会议吗？"
                    @ok="cancelSubMeeting(meetDetail.conferenceId, sub.cycleSubConfID)"
                  >
                    <a-button type="text" status="danger" size="small">取消子会议</a-button>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">主持人密码：</span>
          <span class="value">{{ meetDetail.passwordChair }}</span>
        </div>
        <div class="detail-item">
          <span class="label">来宾密码：</span>
          <span class="value">{{ meetDetail.passwordGeneral || '无' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">创建人：</span>
          <span class="value">{{ meetDetail.createUserName }}</span>
        </div>
        <div class="detail-item">
          <span class="label">参会人：</span>
          <div class="value">
            <div class="participants">
              <div v-for="participant in visibleParticipants" :key="participant.userid" class="participant-item">
                <a-avatar
                  :size="32"
                  :image-url="participant.avatar"
                  class="participant-avatar"
                >
                  {{ participant.realname?.charAt(0) }}
                </a-avatar>
                <span class="participant-name">{{ participant.realname }}</span>
              </div>
            </div>
            <a-button v-if="hasMoreParticipants" type="outline" size="small" class="view-more-btn" @click="allParticipantsVisible = true">
              <template #icon><icon-more /></template>
              查看全部
            </a-button>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span class="value">{{ meetDetail.createTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">更新时间：</span>
          <span class="value">{{ meetDetail.updateTime }}</span>
        </div>
      </div>
    </a-modal>

    <!-- 全部参会人弹窗 -->
    <a-modal
      v-model:visible="allParticipantsVisible"
      title="全部参会人员"
      :width="700"
      :footer="false"
      @cancel="allParticipantsVisible = false"
    >
      <div class="all-participants">
        <div v-for="participant in meetDetail?.participants" :key="participant.userid" class="participant-item">
          <a-avatar
            :size="36"
            :image-url="participant.avatar"
            class="participant-avatar"
          >
            {{ participant.realname?.charAt(0) }}
          </a-avatar>
          <span class="participant-name">{{ participant.realname }}</span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { debounce } from 'lodash-es'
import { Message } from '@arco-design/web-vue'
import { computed, reactive, ref } from 'vue'
import * as XLSX from 'xlsx'
import { IconClose, IconDown, IconDownload } from '@arco-design/web-vue/es/icon'
import { type MeetQuery, adminCancelMeeting, adminCancelSubMeeting, getMeet, listMeet } from '@/apis/meet'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useTable } from '@/hooks'
import { isMobile } from '@/utils'
import has from '@/utils/has'

defineOptions({ name: 'Meet' })

const router = useRouter()
const detailVisible = ref(false)
const meetDetail = ref<any>(null)
const allParticipantsVisible = ref(false) // 全部参会人弹窗显示状态
const exportLoading = ref(false) // 导出加载状态

// 显示的参会人数限制
const PARTICIPANTS_LIMIT = 6

// 计算显示的参会人列表
const visibleParticipants = computed(() => {
  if (!meetDetail.value?.participants) return []
  return meetDetail.value.participants.slice(0, PARTICIPANTS_LIMIT)
})

// 检查是否需要显示"查看更多"按钮
const hasMoreParticipants = computed(() => {
  return meetDetail.value?.participants && meetDetail.value.participants.length > PARTICIPANTS_LIMIT
})

// 格式化时间显示
const formatTime = (timeStr: string): { date: string, time: string } => {
  // 如果时间格式形如 "2023-05-20 14:30:00"，提取日期和时间
  if (timeStr && timeStr.length > 16) {
    // 提取日期部分 (2023-05-20) 和时间部分 (14:30)
    const date = timeStr.substring(0, 10)
    const time = timeStr.substring(11, 16)
    return { date, time }
  }
  return { date: '', time: '' }
}

const queryForm = reactive<MeetQuery>({
  keywords: '',
  meetType: undefined,
  conferenceState: undefined,
  searchDate: [],
  sort: ['createTime,desc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search
} = useTable((page) => listMeet({
  keywords: queryForm.keywords,
  meetType: queryForm.meetType,
  conferenceState: queryForm.conferenceState,
  searchDate: queryForm.searchDate,
  sort: queryForm.sort,
  ...page
}), { immediate: true })

const columns: TableInstanceColumns[] = [
  { title: '会议ID', dataIndex: 'conferenceId', slotName: 'conferenceId', width: 110, align: 'center' },
  { title: '会议室名称', dataIndex: 'meetingRoomName', slotName: 'meetingRoomName', width: 180, ellipsis: true, align: 'center' },
  { title: '会议主题', dataIndex: 'subject', slotName: 'subject', width: 220, ellipsis: true, align: 'center' },
  { title: '会议状态', dataIndex: 'conferenceState', slotName: 'conferenceState', width: 90, align: 'center' },
  { title: '创建人', dataIndex: 'createUserName', slotName: 'createUserName', width: 100, align: 'center' },
  { title: '部门', dataIndex: 'deptName', width: 200, align: 'center' },
  { title: '工号', dataIndex: 'workId', width: 100, align: 'center' },
  { title: '会议类型', dataIndex: 'meetType', slotName: 'meetType', width: 85, align: 'center' },
  { title: '开始时间', dataIndex: 'startTime', slotName: 'startTime', width: 140, ellipsis: true, align: 'center' },
  { title: '结束时间', dataIndex: 'endTime', slotName: 'endTime', width: 140, ellipsis: true, align: 'center' },
  {
    title: '操作',
    slotName: 'action',
    width: 200,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['generator:meetingRoom:update', 'generator:meetingRoom:delete'])
  }
]

const tableSearch = debounce(search, 500)

// 重置
const reset = () => {
  queryForm.keywords = ''
  queryForm.meetType = undefined
  queryForm.conferenceState = undefined
  queryForm.searchDate = []
  search()
}

const onSeeStaff = (record) => {
  router.push({ path: '/meet/signInStaff', query: { conferenceId: record.conferenceId } })
}

// 显示会议详情
const showMeetDetail = async (record: any) => {
  try {
    const res = await getMeet(record.conferenceId)
    // 确保将res.code转换为数字后再比较
    if (String(res.code) === '0' && res.data) {
      // 使用类型断言，扩展MeetDetailResp类型
      const meetData = res.data as any
      // 确保participants字段存在，如果不存在则初始化为空数组
      if (!meetData.participants) {
        meetData.participants = []
      }
      meetDetail.value = meetData
      detailVisible.value = true
    } else {
      Message.error(res.msg || '获取会议详情失败')
    }
  } catch (error: any) {
    console.error('获取会议详情错误:', error)
    Message.error(error.message || '获取会议详情失败')
  }
}

// 获取会议状态文本
const getStatusText = (conferenceState: number) => {
  const statusMap: Record<number, string> = {
    0: '预约',
    1: '已开始',
    2: '取消',
    3: '结束'
  }
  return statusMap[conferenceState] || '未知状态'
}

// 获取会议状态颜色
const getStatusColor = (conferenceState: number) => {
  const statusMap: Record<number, string> = {
    0: 'orange',
    1: 'green',
    2: 'red',
    3: 'red'
  }
  return statusMap[conferenceState] || 'default'
}

// 获取入会范围文本
const getCallInRestrictionText = (callInRestriction: number) => {
  const restrictionMap: Record<number, string> = {
    0: '所有用户',
    2: '企业内用户',
    3: '被邀请用户'
  }
  return restrictionMap[callInRestriction] || '未知范围'
}

// 获取入会范围颜色
const getCallInRestrictionColor = (callInRestriction: number) => {
  const colorMap: Record<number, string> = {
    0: 'green',
    2: 'blue',
    3: 'orange'
  }
  return colorMap[callInRestriction] || 'gray'
}

// 取消会议
const cancelMeeting = async (conferenceId: string) => {
  try {
    const res = await adminCancelMeeting(conferenceId)
    if (String(res.code) === '0') {
      Message.success('会议取消成功')
      search() // 刷新表格数据
    } else {
      Message.error(res.msg || '取消会议失败')
    }
  } catch (error: any) {
    console.error('取消会议错误:', error)
    Message.error(error.message || '取消会议失败')
  }
}

// 取消子会议
const cancelSubMeeting = async (conferenceId: string, cycleSubConfID: string) => {
  try {
    const res = await adminCancelSubMeeting({ conferenceId, cycleSubConfID })
    if (String(res.code) === '0') {
      Message.success('子会议取消成功')
      // 刷新会议详情
      if (meetDetail.value) {
        const detailRes = await getMeet(meetDetail.value.conferenceId)
        if (String(detailRes.code) === '0' && detailRes.data) {
          meetDetail.value = detailRes.data
        }
      }
    } else {
      Message.error(res.msg || '取消子会议失败')
    }
  } catch (error: any) {
    console.error('取消子会议错误:', error)
    Message.error(error.message || '取消子会议失败')
  }
}

// 导出表格数据
const exportTableData = async () => {
  try {
    exportLoading.value = true

    // 使用当前列表API，设置size为1000获取全部数据
    const res = await listMeet({
      keywords: queryForm.keywords,
      meetType: queryForm.meetType,
      conferenceState: queryForm.conferenceState,
      searchDate: queryForm.searchDate,
      sort: queryForm.sort,
      page: 1,
      size: 1000
    })

    if (!res?.data?.list?.length) {
      Message.warning('暂无数据可导出')
      return
    }

    // 1. 定义中文字段映射关系（顺序与数据一致）
    const headerMap = {
      conferenceId: '会议ID',
      meetingRoomName: '会议室名称',
      subject: '会议主题',
      startTime: '开始时间',
      endTime: '结束时间',
      conferenceState: '会议状态',
      createUserName: '创建人',
      workId: '工号',
      deptName: '部门',
      meetType: '会议类型',
      circleType: '是否周期会议',
      location: '会议地点',
      enableSignOut: '是否启用会议签到',
      signInBeforeMinutes: '会议开始前多少分钟可以签到',
      signOutMinutesAfterSignIn: '会议签到多少分钟后才能签退',
      signOutAfterEndMinutes: '会议结束多少分钟后不能签退',
      createTime: '创建时间',
      participants: '参会人'
    }
    const keys = Object.keys(headerMap)
    const ChineseData = [
      keys.map((key) => headerMap[key]), // 表头
      ...res.data.list.map((item: any) =>
        keys.map((key) => {
          // 特殊字段处理
          if (key === 'conferenceState') {
            return item.conferenceState === 0
              ? '预约'
              : item.conferenceState === 1
                ? '已开始'
                : item.conferenceState === 2
                  ? '取消'
                  : item.conferenceState === 3
                    ? '结束'
                    : '未知状态'
          }
          if (key === 'meetType') {
            return item.meetType === 0 ? '线下' : '线上'
          }
          if (key === 'circleType') {
            return item.circleType === 1 ? '是' : '否'
          }
          if (key === 'enableSignOut') {
            return item.enableSignOut === '1' ? '开启' : '关闭'
          }
          if (key === 'participants') {
            return Array.isArray(item.participants)
              ? item.participants.map((p: any) => p.realname).join(',')
              : '--'
          }
          return item[key] ?? '--'
        })
      )
    ]

    const worksheet = XLSX.utils.aoa_to_sheet(ChineseData)
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, worksheet, '会议列表')
    XLSX.writeFile(wb, '会议列表.xlsx')

    Message.success('导出成功')
  } catch (error: any) {
    console.error('导出错误:', error)
    Message.error(error.message || '导出失败')
  } finally {
    exportLoading.value = false
  }
}

const downloadTemplateFile = (url: string) => {
  if (!url) return
  const link = document.createElement('a')
  link.href = url
  link.download = ''
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<style lang="scss" scoped>
.table-page {
  .search-area {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
  }

  :deep(.arco-table-tr) {
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--color-fill-2);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
  }

  .meet-subject {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      color: var(--color-primary-hover);
    }

    .meet-icon {
      font-size: 16px;
    }
  }

  :deep(.arco-table-th) {
    background-color: var(--color-fill-2);
    font-weight: 500;
  }

  .room-name {
    text-align: center;
    line-height: 1.5;
    width: 100%;
    padding: 0 2px;
    word-break: break-all;

    > div {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .subject-wrapper {
    max-width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .time-text {
    font-size: 13px;
    line-height: 1.3;
    text-align: center;

    .time-date {
      color: var(--color-text-2);
      margin-bottom: 2px;
    }

    .time-hour {
      font-weight: 500;
      color: var(--color-text-1);
    }
  }

  :deep(.arco-table-td) {
    padding: 12px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  overflow-x: auto;
}

.meet-detail {
  padding: 16px;

  .detail-item {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;

    .label {
      width: 100px;
      color: var(--color-text-2);
      font-weight: 500;
    }

    .value {
      flex: 1;
      color: var(--color-text-1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .ml-2 {
        margin-left: 8px;
      }

      .config-item {
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 8px;

        &:last-child {
          margin-right: 0;
        }
      }

      .sub-meet-group {
        margin-bottom: 16px;
        padding: 12px;
        background-color: var(--color-fill-2);
        border-radius: 4px;

        .month-title {
          font-size: 16px;
          font-weight: 500;
          color: var(--color-text-1);
          margin-bottom: 12px;
          padding-bottom: 8px;
          border-bottom: 1px solid var(--color-border);
        }

        .sub-meet-list {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .sub-meet-item {
            padding: 12px;
            background-color: var(--color-bg-2);
            border-radius: 4px;
            transition: all 0.2s;

            &:hover {
              background-color: var(--color-fill-3);
              transform: translateY(-2px);
            }

            .sub-meet-time {
              font-size: 14px;
              color: var(--color-text-1);
              margin-bottom: 4px;
            }

            .sub-meet-subject {
              font-size: 14px;
              color: var(--color-text-1);
              margin-bottom: 4px;
            }

            .sub-meet-creator {
              font-size: 12px;
              color: var(--color-text-3);
            }
          }
        }
      }
    }

    .participants {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 20px;
      margin-bottom: 12px;
      width: 100%;

      .participant-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 4px;
        background-color: var(--color-fill-2);
        transition: all 0.2s;

        &:hover {
          background-color: var(--color-fill-3);
          transform: translateY(-2px);
        }

        .participant-avatar {
          cursor: pointer;
          flex-shrink: 0;
        }

        .participant-name {
          font-size: 14px;
          color: var(--color-text-1);
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .view-more-btn {
      margin-top: 10px;
      transition: all 0.2s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.all-participants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;

  .participant-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: var(--color-fill-2);
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
    word-break: break-all;

    &:hover {
      background-color: var(--color-fill-3);
      transform: translateY(-2px);
    }

    .participant-avatar {
      cursor: pointer;
      flex-shrink: 0;
    }

    .participant-name {
      font-size: 14px;
      color: var(--color-text-1);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

// 样式部分，会议详情所有字段都允许自动换行
.meet-detail .value {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}
.meet-detail .value.config-group {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.meet-detail .config-item {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 8px;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}
</style>
